<template>
	
	<view class="wmpopup" @touchmove.stop.prevent="">
		
		
		<view class="wmpopup-box">
			
			<view class="xflex-x-between">
				<view class="wmpopup-title">
					请选择入住时间
				</view>
				<image @click="close" class="wmpopup-gb" src="/static/image/index/popup-gb.png" mode=""></image>
			</view>
			
			<view class="xmt40 xp24">
				<w-calendar startText="住店" endText="离店" mode="range" :show="true" :showMark="false" :showTitle="false" rowHeight="70" :show-confirm="false" :showSubtitle="false"  @confirm="confirm"></w-calendar>
			</view>
			
			<view class="wmpopup-times xflex-x-between">
				<view class="wmpopup-time">
					<view class="wmpopup-titles">
						入住
					</view>
					<view class="wmpopup-year">
						{{counter.enterInfo.start}} {{getDayOfWeek(counter.enterInfo.start)}}
					</view>
				</view>
				<view class="wmpopup-hx">
					
				</view>
				<view class="wmpopup-time">
					<view class="wmpopup-titles">
						离店
					</view>
					<view class="wmpopup-year">
						{{counter.enterInfo.end}} {{getDayOfWeek(counter.enterInfo.end)}}
					</view>
				</view>
			</view>
			
			
			
			
			
			<view class="btn" @click="close()">
				确定
			</view>
		</view>
		
		
		
	</view>
	
</template>

<script setup>
	import {ref} from "vue"
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	
	import {getDayOfWeek} from '../../utils/common.js'
	
	const emit= defineEmits(['close'])
	
	// 关闭弹窗
	const close = () =>{
		emit('close')
	}
	
	const confirm =(e)=>{
		counter.enterInfo.start = e[0]
		counter.enterInfo.end = e[e.length-1]
		counter.enterInfo.day = e.length -1
		console.log(e);
	}
	
	let star = ['任何',"1星/经济型",'2星/舒适型','3星/中档型',"4星/高档型",'5星/豪华型','奢华型']
</script>

<style lang="scss">
	.wmpopup {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		z-index: 3;
		background-color: #00000070;
		overflow: hidden;
	
		&-box {
			position: absolute;
			padding: 30rpx 31rpx;
			box-sizing: border-box;
			width: 750rpx;
			height: 85%;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}
	
		&-gb {
			width: 40rpx;
			height: 40rpx;
		}
	
		&-title {
			font-weight: bold;
			font-size: 40rpx;
			color: #222222;
		}
		
		&-leve {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 18rpx;
			
			&-item {
				width: 162rpx;
				height: 50rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.active {
			background: #0EBBFB;
			color: #FFFFFF;
		}
		
		&-people {
			&-icon {
				width: 50rpx;
				height: 50rpx;
			}
			
			&-num {
				width: 94rpx;
				height: 50rpx;
				background: #F2F2F2;
			}
		}
		.add {
			font-weight: 500;
			font-size: 28rpx;
			color: #0EBBFB;
		}
		
		.btn {
			width: 630rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin: auto;
			text-align: center;
			line-height: 88rpx;
			margin-top: 100rpx;
		}
		
		&-titles {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #111111;
		}
		&-year {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #111111;
		}
		
		&-hx {
			width: 30rpx;
			height: 4rpx;
			background: #333333;
		}
		&-times {
			align-items:flex-end;
		}
	}
	
	
	
	
	
</style>index